<template>
	<view class="pb-safe-area">
		<view class="p-4">
			<view class="flex flex-column grid-gap-4" v-if="list.length > 0">
				<view class="bg-white rounded-4 p-4" v-for="(item, index) in list" :key="index"
				@tap="$page.open('/pages/technician/details?nav=comment&id='+item.technician_id)">
					<x-comment-item :item="item" />
				</view>
				<x-more :status="loading" @load="getList()"></x-more>
			</view>
			<view class="vh-50 flex flex-center" v-else>
				<x-empty type="log" text="暂无评论"></x-empty>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { $page, $api } from "@/utils";
const loading = ref('loadmore');
const search = ref({
	page: 1
});
const list = ref([]);
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Comment.technician(search.value).then((data: any) => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		nextTick(() => {
			if (data.current_page >= data.last_page) {
				loading.value = 'nomore';
			}
		})
	}).catch(() => {
		loading.value = 'loadmore';
	}).finally(() => {
		if (loading.value === 'loading') loading.value = 'loadmore';
	})
}
onLoad(() => {
	getList();
})
onReachBottom(() => {
	getList();
})
</script>